<template>
  <div class="usercenter-box">
    <div class="common-usercenter-box" style="min-height: 900px;">
      <h6 class="common-title">资金明细</h6>
      <div class="myorderbox common-form-set">
        <el-form
          class="charge-query-form"
          inline
          :model="queryParams">
          <el-form-item
            style="display: block;"
            label="查询类型：">
            <el-radio v-model="queryType" label="金额明细">金额明细</el-radio>
            <el-radio v-model="queryType" label="金额统计">金额统计</el-radio>
          </el-form-item>
          <el-form-item
            style="display: block;"
            label="查询条件：">
            <el-select v-model="queryParams.queryType">
              <el-option
                v-for="item in transactionTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-radio
              label="2"
              v-model="queryParams.queryType">
              金额统计
            </el-radio> -->
          </el-form-item>
          <el-form-item
            label="查询时间：">
            <el-date-picker
              v-model="queryParams.queryTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doQuery">
              确认查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="common-table-box">
<!--  <div class="usercenter-box">-->
<!--    <div class="common-usercenter-box">-->
<!--      <h6 class="common-title">我的明细</h6>-->
<!--    <el-button class="query" type="primary" @click="doQuery">查询</el-button>-->

    <section class="bill">
      <el-table v-loading="isLoading" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="交易日期" width="180">
          <template slot-scope="{ row }">
            {{ row.createTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column
          prop="transactionTypeName"
          label="交易类型"
          width="180"
        ></el-table-column>
        <el-table-column label="收入（元）">
          <template slot-scope="{ row }">
            <span
              v-if="
                row.transactionType === 2 ||
                  row.transactionType === 3 ||
                  row.transactionType === 4 ||
                  row.transactionType === 6
              "
              >{{ row.money }}</span
            >
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column label="支出（元）">
          <template slot-scope="{ row }">
            <span
              v-if="
                row.transactionType === 1 ||
                  row.transactionType === 5 ||
                  row.transactionType === 7
              "
              >{{ row.money }}</span
            >
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="beforeMoney"
          label="变化前（元）"
        ></el-table-column>
        <el-table-column prop="endMoney" label="变化后（元）"></el-table-column>
        <el-table-column label="账号对象">
          <template>总账号</template>
        </el-table-column>
        <el-table-column label="详细">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.orderID"
              type="primary"
              size="mini"
              @click="detail(row)"
              >详细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :page-size="query.pageSize"
        :total="dataTotal"
        @current-change="pageChage"
      >
      </el-pagination>
    </section>
    <orderDetailDialog ref="detail"></orderDetailDialog>
  </div>
  </div>
  </div>
</template>

<script>
import DateFilter from '@/components/dateFilter2'
import pageMixin from '@/mixins/page'
import orderDetailDialog from '@/components/orderDetailDialog'
import { dateFormat } from '@/common/utils'
export default {
  layout: 'webIn4',
  components: {
    DateFilter,
    orderDetailDialog
  },
  mixins: [pageMixin],
  data() {
    return {
      transactionTypeOptions: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 1,
          label: '订单扣款'
        },
        {
          value: 2,
          label: '订单退款'
        },
        {
          value: 3,
          label: '充值到账'
        },
        {
          value: 4,
          label: '前台加款'
        },
        {
          value: 5,
          label: '前台减款'
        },
        {
          value: 6,
          label: '管理员加款'
        },
        {
          value: 7,
          label: '管理员减款'
        }
      ],
      isLoading: true,
      tableData: [],
      queryType: '金额明细',
      queryParams: {
        transactionType: '',
        queryTime: [],
      },
      timeOptions: [
        {
          value: 0,
          label: '昨天'
        },
        {
          value: 1,
          label: '今天'
        },
        {
          value: 2,
          label: '本周'
        },
        {
          value: 3,
          label: '本月'
        },
        {
          value: 4,
          label: '近一月'
        },
        {
          value: 5,
          label: '近三月'
        },
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.isLoading = true
      const res = await this.$axios.post(
        '/finance/userMoneyDetail/detailPage',
        null,
        { params: this.query }
      )
      if (res.code === 1001 && res.body) {
        this.tableData = res.body.records || []
        this.dataTotal = res.body.total
      }
      this.isLoading = false
    },
    doQuery() {
      const queryParams = JSON.parse(JSON.stringify(this.queryParams))
      let [beginTime, endTime] = this.queryParams.queryTime
      if(beginTime) {
        beginTime = dateFormat(beginTime.getTime())
        queryParams.beginTime = beginTime
      }
      if(endTime) {
        endTime = dateFormat(endTime.getTime())
        queryParams.endTime = endTime
      }
      delete queryParams.queryTime
      if(queryParams.transactionType) {
        queryParams.transactionType = [queryParams.transactionType]
      }
      Object.keys(queryParams).forEach(key => {
        if(!queryParams[key] && queryParams[key !== 0]
          || queryParams[key]?.length === 0) {
          delete queryParams[key]
        }
      })
      this.query = Object.assign(this.query, queryParams)
      this.getList()
    },
    async detail(item) {
      const res = await this.$axios.get(
        `/order/order/orderDetails?orderCode=${item.orderID}`
      )
      if (res.code === 1001 && res.body) {
        this.$refs.detail.show(res.body)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tip {
  font-size: 12px;
  padding: 10px 15px;
  background: white;
  color: $--basic-orange;
  margin-bottom: 15px;
}
section + section {
  margin-top: 15px;
}
.bill {
  background: white;
  .el-pagination {
    text-align: right;
    padding: 20px;
  }
}
.charge-query-form--time {
  width: 316px;
}
.charge-query-form {
  margin-left: 70px;
  .el-form-item__label {
    min-width: 100px;
  }
}
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style6/common.css';
// @import 'assets/style/style6/openlogin.css';
// @import 'assets/style/style6/style.css';
// @import 'assets/style/style6/font_1451715_0505c2bxv7b7.css';
@import 'element-ui/lib/theme-chalk/index.css';
</style>
<style>
@import 'assets/style/el-adapter.css';
</style>
